<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="description" content="">
		<meta name="keywords" content="">
		<title></title>
		<link rel="stylesheet" type="text/css" href="assets/css/reset.css" />
		<link rel="stylesheet" type="text/css" href="assets/css/skin/layer.css" />
		<link rel="stylesheet" type="text/css" href="assets/css/app-mobile.css" />
		<script type="text/javascript">
			console.time("test");
			/*
			    # 按照宽高比例设定html字体, width=device-width initial-scale=1版
			    # @pargam win 窗口window对象
			    # @pargam option{
			      designWidth: 设计稿宽度，必须
			      designHeight: 设计稿高度，不传的话则比例按照宽度来计算，可选
			      designFontSize: 设计稿宽高下用于计算的字体大小，默认20，可选
			      callback: 字体计算之后的回调函数，可选
			    }
			    # return Boolean;
			    # xiaoweili@tencent.com
			    # ps:请尽量第一时间运行此js计算字体
			*/
			! function(win, option) {
				var count = 0,
					designWidth = option.designWidth,
					designHeight = option.designHeight || 0,
					designFontSize = option.designFontSize || 20,
					callback = option.callback || null,
					root = document.documentElement,
					body = document.body,
					rootWidth, newSize, t, self;
				root.style.width = '100%';
				//返回root元素字体计算结果
				function _getNewFontSize() {
					var scale = designHeight !== 0 ? Math.min(win.innerWidth / designWidth, win.innerHeight / designHeight) : win.innerWidth / designWidth;
					return parseInt(scale * 10000 * designFontSize) / 10000;
				}! function() {
					rootWidth = root.getBoundingClientRect().width;
					self = self ? self : arguments.callee;
					//如果此时屏幕宽度不准确，就尝试再次获取分辨率，只尝试20次，否则使用win.innerWidth计算
					if(rootWidth !== win.innerWidth && count < 20) {
						win.setTimeout(function() {
							count++;
							self();
						}, 0);
					} else {
						newSize = _getNewFontSize();
						//如果css已经兼容当前分辨率就不管了
						if(newSize + 'px' !== getComputedStyle(root)['font-size']) {
							root.style.fontSize = newSize + "px";
							return callback && callback(newSize);
						};
					};
				}();
				//横竖屏切换的时候改变fontSize，根据需要选择使用
				win.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
					clearTimeout(t);
					t = setTimeout(function() {
						self();
					}, 300);
				}, false);
			}(window, {
				designWidth: 640,
				designHeight: 1,
				designFontSize: 100,
				callback: function(argument) {
					console.timeEnd("test")
				}
			});
		</script>
	</head>

	<body class="tw-body baidu-wx">

		<div class="content">
			<div id="map" class="shop_map"></div>
			<div class="menu">
				<ul>
					<li>
						<a href="#" class="gy_box" onclick="selectMap('gy')">
							<span class="icon"><img src="assets/css/img/gy_icon.png"></span>
							<span class="white">工业</span>
						</a>
					</li>
					<li>
						<a href="#" class="fw_box" onclick="selectMap('fwy')">
							<span class="icon"><img src="assets/css/img/fw_icon.png"></span>
							<span class="white">服务业</span>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="icon"><img src="assets/css/img/new_icon.png"></span>
							<span>新开工</span>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="icon"><img src="assets/css/img/continue_icon.png"></span>
							<span>续建</span>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="icon"><img src="assets/css/img/early_icon.png"></span>
							<span>前期</span>
						</a>
					</li>
				</ul>
			</div>
			<div class="layer_box">
				<div class="layer-cont">
					<img style="width:100%" src="assets/css/img/layermap.png" />
				</div>
				<span class="close_btn" id="close_layer" onclick="hideLayer()"></span>
			</div>
		</div>

		<div id='loadBg'></div>
	</body>

</html>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=TpteRSwjGC8xD60ec9GcYExGceCOT2me"></script>
<script type="text/javascript">
	var arrFWY = [],
		arrGY = [];
	$.get('assets/js/map.json', function(data) {
		for(var i = 0; i < data.length; i++) {
			if(data[i].distance_type == "FWY") {
				arrFWY.push(data[i]);
			} else if(data[i].distance_type == "GY") {
				arrGY.push(data[i]);
			}
		}
		showMap(data);

	});

	function selectMap(type) {
		if(type == 'gy') {
			showMap(arrGY);
		} else {
			showMap(arrFWY);
		}
	}

	function showMap(data) {
		var lat, lng, point, markers = [];
		// point = data[0].point.split(',');
		point = new BMap.Point(120.863561, 32.01604);
		var map = new BMap.Map("map");
		map.centerAndZoom(point, 15);
		map.enableScrollWheelZoom(true);
		//map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
		map.addControl(new BMap.MapTypeControl({
			mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]
		}));
		var icon1 = new BMap.Icon('assets/css/img/fwmap_icon.png', new BMap.Size(25, 39));
		var icon2 = new BMap.Icon('assets/css/img/cymap_icon.png', new BMap.Size(25, 39));
		$.each(data, function(name, index) {
			lat = index.point.split(',')[0];
			lng = index.point.split(',')[1];
			var point = new BMap.Point(lat, lng);
			var marker = new BMap.Marker(
				point, {
					icon: (index.distance_type === 'FWY') ? icon1 : icon2
				}
			);
			map.addOverlay(marker);
			var label = new BMap.Label(index.store_name, {
				offset: new BMap.Size(0, 42)
			});
			label.setStyle({
				color: "#fff",
				fontSize: "12px",
				border: "0",
				width: "80px",
				padding: "3px",
				overflow: 'hidden',
				'text-overflow': 'ellipsis',
				'white-space': 'nowrap',
				background: (index.distance_type === 'FWY') ? '#65a24a' : '#e86d6c',
				'border-radius': '3px'
			});
			marker.setLabel(label);
			markers.push(marker);
			var sContent = "<img id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='天安门'/>";
			var infoWindow = new BMap.InfoWindow(sContent);
			marker.addEventListener("click", function(e) {
				map.panTo(new BMap.Point(e.point.lng, e.point.lat));
				$('.layer_box').fadeIn();
			});
			marker.addEventListener("mouseover", function(e) {
				this.openInfoWindow(infoWindow);
				document.getElementById('imgDemo').onload = function() {
					infoWindow.redraw();
				}
			});

		});
	}

	function hideLayer() {
		$(".layer_box").fadeOut();
	}
</script>
<script src="assets/js/require.js"></script>
<script>
	require(['app'], function(app) {
		'use strict';
		new app().init();
	});
</script>